/**
* 系统管理 菜单管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    +
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">菜单管理</div>
      <el-col :span="4"></el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button size="small" type="primary" @click="unfold">全部展开</el-button>
          <el-button size="small" type="primary" @click="fold">全部压缩</el-button>
        </div>
        <el-tree class="treeclass" ref="tree" :data="treeData" default-expand-all="folded" :props="defaultProps"
                 @node-click="nodeclick"
                 @check-change="handleClick" check-strictly node-key="id" show-checkbox></el-tree>

      </el-col>


      <div class="mod-btnbox">
        <el-button v-if="opRight.includes('save')" size="small" type="primary" icon="el-icon-plus" @click="addModule">
          添加
        </el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="close">收起</el-button>
      </div>
      <el-col :span="18" v-show="showadd">

        <el-form ref="form" :model="form" label-width="80px" :rules="rules">

          <el-form-item label="父级菜单" prop="parentId">
            <el-select size="small" v-model="form.parentId" placeholder="请选择" class="selectw">
              <el-option v-for="parm in fmenu" :key="parm.name" :label="parm.name" :value="parm.id">
                <i class="iconfont" :class="parm.id"/>{{parm.name}}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="菜单名称" prop="moduleName">
            <el-input size="small" v-model="form.moduleName"></el-input>
          </el-form-item>

          <el-form-item label="图标" prop="moduleIcon">

            <el-select clearable v-model="form.moduleIcon" placeholder="请选择图标" style="width: 100%"
                       @change="selectChange">
              <el-option v-for="item in options" :key="item.name" :lable="item.name"
                         :value="item.value" @mouseenter.native="setName(item.name)">
                <i class="iconfont" :class="item.value"/>
              </el-option>
            </el-select>
            <!--            <el-input size="small" v-model="form.moduleIcon"></el-input>-->
          </el-form-item>

          <el-form-item label="URL" prop="moduleUrl">
            <el-input size="small" v-model="form.moduleUrl"></el-input>
          </el-form-item>
          <el-form-item label="顺序" prop="moduleOrder">
            <el-input size="small" v-model="form.moduleOrder"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="opRight.includes('save')" size="small" type="primary" @click="saveModule('form')">保存
            </el-button>
            <el-button v-if="opRight.includes('delete')" size="small" type="primary" v-show="showdelete"
                       @click="deleteModule">删除
            </el-button>

          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    ModuleList, ModuleGet,
    ModuleNodes, ModuleSave,
    ModuleDelete, ModuleIcon,
    ModuleIconUrl, UserOpRight
  } from '../../api/userMG'
  import {lert} from "../../api/axiosFun";

  export default {
    data() {
      return {
        dialogFormVisible: false,
        showdelete: false,
        showadd: false,
        treeData: [],
        options: [],
        fmenu: [],
        folded: true,
        opRight: [],
        login: {
          code: 'menu',
          token: localStorage.getItem('userdata')
        },
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        form: {
          token: localStorage.getItem('username'),
          issave: true,
          addUser: '',
          editUser: '',
          addTime: '',
          editTime: '',
          moduleId: '',
          parentId: '',
          parentName: '',
          moduleLevel: '',
          systemNo: '',
          isLeaf: '',
          fullIndex: '',
          moduleIcon: '',
          moduleOrder: '',
          moduleName: '',
          moduleNotes: '',
          moduleUrl: ''
        },
        // rules表单验证
        rules: {
          parentId: [
            {required: true, message: '请选择父级菜单', trigger: 'blur'}
          ],
          moduleName: [
            {required: true, message: '请输入菜单名称', trigger: 'blur'}
          ],
          moduleIcon: [
            {required: true, message: '请输入菜单图标', trigger: 'blur'}
          ],
          moduleUrl: [{required: false, message: '请输入URL', trigger: 'blur'}],
          moduleOrder: [
            {required: true, message: '请输入菜单顺序', trigger: 'blur'}
          ]
        },
      }
    },
    /**
     * 创建完毕
     */

    created() {
      this.getdata()
      this.getmenu()
      // this.getIcon()
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {

      //全部展开
      unfold() {
        //如果当前是展开则停止
        if (this.folded) return
        this.folded = !this.folded;
        this.expandNodes(this.$refs.tree.store.root)
      },

      //全部收起
      fold() {
        if (!this.folded) return
        this.folded = !this.folded;
        this.expandNodes(this.$refs.tree.store.root)
      },

      //遍历属性数据，设置每一项的expanded属性，实现展开收起
      expandNodes(node) {
        node.expanded = this.folded;
        for (let i = 0; i < node.childNodes.length; i++) {
          node.childNodes[i].expanded = this.folded;
          if (node.childNodes[i].childNodes.length > 0) {
            this.expandNodes(node.childNodes[i]);
          }
        }
      },

      setName(param) {
        this.moduleName = param;
        console.log("成功设置name：" + this.form.moduleName)
      },
      //收起编辑框
      close() {
        this.showadd = false;
      },
      //获取相应的url
      selectChange(param) {

        ModuleIconUrl(this.moduleName).then(res => {
          const result = JSON.parse(res.data);
          if (res.success) {
            this.form.moduleUrl = result
          }
        })
      },

      //获取Icon图标
      getIcon() {
        ModuleIcon().then(res => {
          this.options = JSON.parse(res.data)
          this.fmenu = this.options//把父级菜单也设置好
        }).catch(err => {
          this.$message.error('获取图标失败了')
        })
      },

      // 获取数据
      getdata() {
        //获取当前页面的操作权限(opRight)
        UserOpRight(this.login)
          .then(res => {
            this.opRight = JSON.parse(res.data);
          })
        ModuleList()
          .then(res => {
            lert(res);
            this.treeData = JSON.parse(res.data)
          })
          .catch(err => {
            this.loading = false
            this.$message.error('菜单管理列表失败，请稍后再试！')
          })
      },
      // 添加
      addModule() {
        this.showadd = true
        this.showdelete = false
        this.form.issave = true
        this.getIcon()
        this.form.addUser = ''
        this.form.editUser = ''
        this.form.addTime = ''
        this.form.editTime = ''
        this.form.moduleId = ''
        this.form.parentId = ''
        this.form.moduleLevel = ''
        this.form.systemNo = ''
        this.form.isLeaf = ''
        this.form.fullIndex = ''
        this.form.moduleIcon = ''
        this.form.moduleOrder = ''
        this.form.moduleName = ''
        this.form.moduleNotes = ''
        this.form.moduleUrl = ''
      },
      // 获取父级菜单
      getmenu() {
        let parm = {
          page: '1',
          limit: '10'
        }
        ModuleNodes(parm)
          .then(res => {
            this.fmenu = JSON.parse(res.data)
          })
          .catch(err => {
            this.loading = false
            this.$message.error('父级菜单列表获取失败，请稍后再试！')
          })
      },
      // 复选变单选
      handleClick(data, checked, node) {
        if (checked) {
          this.$refs.tree.setCheckedNodes([])
          this.$refs.tree.setCheckedNodes([data])
          this.showadd = true
          this.showdelete = true
          this.nodeclick(data)
        } else {
        }
      },
      // 点击节点
      // nodeclick(arr, node, self) {
      nodeclick(arr) {
        ModuleGet(arr.id)
          .then(res => {
            lert(res);
            console.log(res)
            this.showdelete = true
            this.showadd = true
            var parse = JSON.parse(res.data)
            console.log(parse)
            this.form.addTime = parse.addTime
            this.form.addUser = parse.addUser
            this.form.moduleName = parse.name
            this.form.moduleIcon = parse.icon
            this.form.parentId = parse.pid
            this.form.moduleUrl = parse.url
            this.form.moduleOrder = parse.morder
            this.form.moduleId = parse.id
            this.form.issave = false
            this.$refs.tree.setCheckedNodes([])
            this.$refs.tree.setCheckedNodes([arr])
            console.log("2")
          })
          .catch(err => {
            this.loading = false
            this.$message.error('菜单管理获取失败，请稍后再试！')
          })
      },
      // 保存菜单
      saveModule(editData) {
        this.$refs[editData].validate(valid => {
          if (valid) {
            ModuleSave(this.form)
              .then(res => {
                lert(res);
                this.getdata()
                this.$message.success('保存或编辑菜单管理列表成功！')
              })
              .catch(err => {
                this.$message.error('菜单管理列表保存失败，请稍后再试！')
              })
          } else {
            return false
          }
        })
      },
      // 删除菜单
      deleteModule() {
        ModuleDelete(this.form.moduleId)
          .then(res => {
            lert(res);
            this.getdata()
            this.getmenu()
            this.$message.success('菜单管理列表删除成功！')
          })
          .catch(err => {
            this.$message.error('菜单管理列表删除失败，请稍后再试！')
          })
      }
    }
  }
</script>

<style>
  .user-search {
    margin-top: 20px !important;
  }

  .user-search td {
    margin-top: 20px !important;
  }

  .userRole {
    width: 100%;
  }

  .el-table__expanded-cell {
    padding: 0px !important;
    margin: 0px !important;
  }

  .modt-box {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f0f2f5;
    text-align: center;
    color: #334157;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .mod-btnbox {
    margin-bottom: 20px;
  }

  .treeclass {
    border: 1px solid #f3f3f3;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .selectw {
    width: 100%;
  }
</style>

